<template>
  <el-dialog
    :visible.sync="dialogVisible"
    top="10vh"
    append-to-body
    :close-on-click-modal="false"
    class="tag-edit-dialog monitor-log-dialog"
    width="50%"
    @closed="clearDialog"
    v-dialogMove
  >
    <div slot="title">
      <tag-content-header>
        <template #title>
          <span class="title-text">任务日志</span>
        </template>
      </tag-content-header>
    </div>
    <textarea :id="'sys-schedule-log-' + type"></textarea>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import CodeMirror from 'codemirror'
export default {
  data() {
    return {
      dialogVisible: false,
      log: '',
      id: '',
      type: '',
      length: 2000,
      num: 1,
      editor: null,
      nestedId: ''
    }
  },
  methods: {
    showDialog(id, type, nestedId) {
      this.id = id
      this.type = type
      if (type === 'schedule') this.nestedId = nestedId
      this.getLog()
    },
    getLog() {
      let url =
        this.type === 'schedule'
          ? 'azkaban/azkabanExecutionHistory/executeTaskLog'
          : 'azkaban/azkabanExecutionHistory/executeTaskDetail'
      let params = {
        execId: this.id,
        length: this.length,
        pageNum: this.num
      }
      if (this.type === 'schedule') {
        params.nestedId = this.nestedId
      }
      this.$ajax({
        url: this.$ajax.setUrl(url),
        method: 'get',
        params: this.$ajax.setParams(params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dialogVisible = true
          this.$nextTick(() => {
            this.setLog(data.data)
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    setLog(log) {
      if (!this.editor) {
        this.editor = CodeMirror.fromTextArea(document.getElementById('sys-schedule-log-' + this.type), {
          mode: 'javascript',
          lineNumbers: true,
          readOnly: true,
          lineWrapping: true
        })
        this.editor.on('scroll', this.scrollFun)
        this.log = log
        this.editor.setValue(this.log)
      } else {
        this.log = this.log + log
        this.editor.replaceRange(log, { line: this.editor.lastLine() })
      }
      if (log.length === 0) {
        this.editor.off('scroll', this.scrollFun)
      }
    },
    scrollFun(item) {
      let info = item.getScrollInfo()
      if (info.clientHeight + info.top > info.height - 10) {
        this.num = this.num + 1
        this.getLog()
      }
    },
    clearDialog() {
      this.log = ''
      this.id = ''
      this.num = 1
      this.nestedId = ''
      if (this.editor) {
        this.editor.off('scroll', this.scrollFun)
        this.editor.toTextArea()
        this.editor = null
      }
    }
  }
}
</script>

<style lang="scss">
.monitor-log-dialog {
  .CodeMirror {
    border: 1px solid $border-color;
  }
}
</style>
